<%@ page contentType="text/html;charset=UTF-8" language="java" isELIgnored="false" %>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<html>
<head>
    <meta charset="UTF-8">
    <title>爱购商品详情页</title>
    <link rel="icon" type="image/x-icon" href="/static/image/user/title-icon.jpg"/>
    <link rel="stylesheet" href="/static/css/user/reset.css"/>
    <link rel="stylesheet" href="/static/css/user/top.css"/>
    <link rel="stylesheet" href="/static/css/user/goodsDetail.css"/>
    <link rel="stylesheet" href="/static/css/user/footer.css"/>
    <link rel="stylesheet" href="/static/css/user/font-awesome-4.7.0/Font-Awesome-master/css/font-awesome.min.css"/>
    <script type="text/javascript" src="/static/js/jquery/jquery-3.7.1.min.js"></script>
</head>
<body>
<!--头部-->
<div class="top" id="top">
    <!--头部bar-->
    <jsp:include page="../head.jsp"></jsp:include>
    <!--logo+搜索-->
    <div class="top-header w1230 clear-float">
        <a href="index.html" target="_blank" class="logo">
            <img src="/static/image/user/logo.png"/>
        </a>
        <div class="top-header-right">
            <!--搜索框-->
            <div class="search clear-float">
                <input type="text" placeholder="牛奶" class="search-txt"/>
                <a href="#" class="search-btn">搜索</a>
            </div>
            <!--热搜-->
            <p class="hotkey">
                <a href="#">牛奶</a>
                <a href="#">牛仔裤</a>
                <a href="#">巧克力</a>
                <a href="#">月饼</a>
                <a href="#">抽纸</a>
                <a href="#">狗粮</a>
                <a href="#">奶粉</a>
                <a href="#">护发素</a>
                <a href="#">进口食品</a>
                <a href="#">良品铺子</a>
            </p>
        </div>
    </div>
</div>
<!--导航栏-->
<div class="nav">
    <div class="w1230">
        <div id="all-goods">
            <span class="all-goods">所有商品分类</span>
            <div class="nav-er" id="nav-er">
                <ul>
                    <c:forEach items="${productTypes}" var="productType">
                        <li>
                            <h3><a href="#"><i class="fa fa-book"></i>${productType.name}</a></h3>
                        </li>
                    </c:forEach>
                </ul>
            </div>
        </div>
    </div>
</div>
<!--商品详情-->
<div class="w1230 clear-float goods-main">
    <div class="big-img">
        <img src="/file/show?name=${pAndBList[0].img}" height="360" width="360"/>
    </div>
    <div class="goods-detail">
        <h3 class="goods-title">${pAndBList[0].name}</h3>
        <p class="price">价格<span>￥${pAndBList[0].price}</span></p>
        <p class="store-num">销量：<span>800件</span></p>
        <div class="update-num">
            <div>
                <input type="text" value="1" id="goodsNum"/>
                <span class="add"></span>
                <span class="reduce"></span>
            </div>
            <a href="#" id="addCart" title="添加购物车"><i class="fa fa-shopping-cart"></i>添加购物车</a><span id="tips"><i
                class="fa fa-check-circle-o"></i>添加成功</span>
        </div>
    </div>
    <!--店家承诺-->
    <div class="promise">
        <h3><i class="fa fa-handshake-o"></i>爱购承诺</h3>
        <p>爱购平台卖家销售并发货的商品，由平台卖家提供发票和相应的售后服务。请您放心购买！
            注：因厂家会在没有任何提前通知的情况下更改产品包装、产地或者一些附件，本司不能确保客户收到的货物与商城图片、产地、附件说明完全一致。只能确保为原厂正货！并且保证与当时市场上同样主流新品一致。若没有及时更新，请大家谅解！</p>
    </div>
</div>
<!--商品介绍-->
<div class="w1230 clear-float">
    <!--商品推荐-->
    <div class="recommend goods-show">
        <h3>看了本商品的用户最终购买了</h3>
        <ul class="clear-float">
            <c:forEach items="${products}" var="product">
                <li><a href="/user/index/goodsDetail?id=${product.id}">
                    <div class="g-img"><img src="/file/show?name=${product.img}" alt="" width="230px"
                                            height="230px"/>
                    </div>
                    <p class="g-title">${product.desc}</p>
                    <span class="g-price">￥${product.price}</span>
                    <span class="g-num">销量:800</span>
                </a></li>
            </c:forEach>
        </ul>
    </div>
    <!--商品介绍-->
    <div class="goods-des">
        <h3 class="goods-tro">商品介绍</h3>
        <div class="goods-info">
            <ul>
                <c:forEach items="${pAndBList[0].detailsImg.split(',')}" var="pAndB">
                    <li><img src="/file/show?name=${pAndB}" alt="" width="680"/></li>
                </c:forEach>
            </ul>
        </div>
    </div>
</div>
<!--脚注-->
<div class="footer">
    <p class="w1230">
        <a href="#">关于爱购</a>
        <a href="#">合作伙伴</a>
        <a href="#">营销中心</a>
        <a href="#">廉正举报</a>
        <a href="#">联系客服</a>
        <a href="#">开发平台</a>
        <a href="#">诚征英才</a>
        <a href="#">联系我们</a>
        <a href="#">网站地图</a>
        <a href="#">知识产权</a><span>|</span>
        <span>&copy;2018-2020 igo.com 版权所有</span>
    </p>
</div>
<script>
    $(function () {
        //增加商品数量
        $(".add").click(function () {
            $("#goodsNum").val(parseInt($("#goodsNum").val()) + 1);
            $()
            $(".reduce").css({"backgroundPositionX": "0", "backgroundPositionY": "25px"});
        });
        //减少商品数量
        $(".reduce").click(function () {
            console.log($("#goodsNum").val());
            if ($("#goodsNum").val() > 1) {
                $("#goodsNum").val(parseInt($("#goodsNum").val()) - 1);
                $(this).css({"backgroundPositionX": "0", "backgroundPositionY": "25px"});
            }
            if ($("#goodsNum").val() == 1) {
                $(this).css({"backgroundPositionX": "-24px", "backgroundPositionY": "25px"});
            }

        });
        var timer;
        //点击添加购物车
        $("#addCart").click(function () {
            clearTimeout(timer);
            $("#tips").css("display", "inline-block");
            timer = setTimeout(function () {
                $("#tips").css("display", "none");
            }, 3000);
        });
        $("#addCart").click(function () {
            $.post("user/index/getOrdersData",
                {"productId":${pAndBList[0].id}, "num": $("#goodsNum").val()}, function () {
                    console.log('ok')
                }, "JSON")
        });

    });
</script>
</body>
</html>
